<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 标题</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button class="navbar-toggle" type="button" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle
                                navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span
                                class="icon-bar"></span></button> <a class="navbar-brand" href="#">Brand</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a href="#">Link</a>
                            </li>
                            <li>
                                <a href="#">Link</a>
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown<strong
                                        class="caret"></strong></a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">Action</a>
                                    </li>
                                    <li>
                                        <a href="#">Another action</a>
                                    </li>
                                    <li>
                                        <a href="#">Something else here</a>
                                    </li>
                                    <li class="divider">
                                    </li>
                                    <li>
                                        <a href="#">Separated link</a>
                                    </li>
                                    <li class="divider">
                                    </li>
                                    <li>
                                        <a href="#">One more separated link</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input class="form-control" type="text">
                            </div> <button class="btn btn-default" type="submit">Submit</button>
                        </form>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="#">Link</a>
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown<strong
                                        class="caret"></strong></a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">Action</a>
                                    </li>
                                    <li>
                                        <a href="#">Another action</a>
                                    </li>
                                    <li>
                                        <a href="#">Something else here</a>
                                    </li>
                                    <li class="divider">
                                    </li>
                                    <li>
                                        <a href="#">Separated link</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                </nav>
                <div class="jumbotron">
                    <h1>
                        Hello, JavaScript!
                    </h1>
                    <p>
                    </p>
                    <p>第四章案例</p>
                    <p>
                        <a class="btn btn-primary btn-large" href="#">Learn more</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-4 column ">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <p>
                            <a href="default.html">
                                <h2>返回主页面</h2>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 column ">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <p>
                            <a class="btn" href="../第四章/demo01.html">
                                <h2>【例4-1】demo01</h2>
                            </a> </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 column ">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <p>
                            <a class="btn" href="../第四章/demo02.html">
                                <h2>【例4-2】demo02</h2>
                            </a> </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 column panel panel-">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <p>
                            <a class="btn" href="../第四章/demo03.html">
                                <h2>【例4-3】demo03</h2>
                            </a> </p>
                    </div>
                </div>


            </div>
            <div class="col-md-4 column panel panel panel-">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <p>
                            <a class="btn" href="../第四章/demo04.html">
                                <h2>【例4-4】demo04</h2>
                            </a> </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 column panel panel panel panel-">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <p>
                            <a class="btn" href="../第四章/demo05.html">
                                <h2>【例4-5】demo05</h2>
                            </a> </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 column panel panel panel panel-">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <p>
                            <a class="btn" href="../第四章/4.1.4.html">
                                <h2>4.1.4【案例】字符串大小写转换</h2>
                            </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 column panel panel panel panel-">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <p>
                            <a class="btn" href="../第四章/4.4.3.html">
                                <h2>4.4.3【案例】求斐波那契数列第N项的值</h2>
                            </a> </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 column panel panel panel panel-">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <p>
                            <a class="btn" href="../第四章/practice.html">
                                <h2>动手实践：网页计算器</h2>
                            </a> </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

</html>